<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Todo Electron</title>
    <script src="https://unpkg.com/vue@2.4.1/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.0.6/index.css">
  </head>
  <body>
    <section class="todoapp">
        <header class="header">
            <h1>记事本</h1>
            <input class="new-todo"
            autofocus autocomplete="off"
            placeholder="What needs to be done?"
            v-model="newTodo"
            @keyup.enter="addTodo">
        </header>
        <section class="main" v-show="todos.length" v-cloak>
            <input class="toggle-all" type="checkbox" v-model="allDone">
            <ul class="todo-list">
                <li v-for="todo in filteredTodos"
                    class="todo"
                    :key="todo.id"
                    :class="{ completed: todo.completed, editing: todo == editedTodo }">
                    <div class="view">
                    <input class="toggle" type="checkbox" v-model="todo.completed">
                    <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                    <button class="destroy" @click="removeTodo(todo)"></button>
                    </div>
                    <input class="edit" type="text"
                    v-model="todo.title"
                    v-todo-focus="todo == editedTodo"
                    @blur="doneEdit(todo)"
                    @keyup.enter="doneEdit(todo)"
                    @keyup.esc="cancelEdit(todo)">
                </li>
            </ul>
        </section>
        <footer class="footer" v-show="todos.length" v-cloak>
            <span class="todo-count">
            <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
            </span>
            <ul class="filters">
            <li><a href="#/all" :class="{ selected: visibility == 'all' }">全部事项</a></li>
            <li><a href="#/active" :class="{ selected: visibility == 'active' }">待办</a></li>
            <li><a href="#/completed" :class="{ selected: visibility == 'completed' }">完成</a></li>
            </ul>
            <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
                清理全部完成事项
            </button>
        </footer>
    </section>
    
    <script>
        var STORAGE_KEY = 'todos-vuejs-2.0'
        var todoStorage = {
            fetch: function () {
                var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
                todos.forEach(function (todo, index) {
                todo.id = index
                })
                todoStorage.uid = todos.length
                return todos
            },
            save: function (todos) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
            }
        }

        // visibility filters
        var filters = {
            all: function (todos) {
                return todos
            },
            active: function (todos) {
                return todos.filter(function (todo) {
                return !todo.completed
                })
            },
            completed: function (todos) {
                return todos.filter(function (todo) {
                return todo.completed
                })
            }
        }

        // app Vue instance
        var app = new Vue({
        // app initial state
            data: {
                todos: todoStorage.fetch(),
                newTodo: '',
                editedTodo: null,
                visibility: 'all'
            },

            watch: {
                todos: {
                handler: function (todos) {
                    todoStorage.save(todos)
                },
                deep: true
                }
            },

            computed: {
                filteredTodos: function () {
                    return filters[this.visibility](this.todos)
                },
                remaining: function () {
                    return filters.active(this.todos).length
                },
                allDone: {
                    get: function () {
                        return this.remaining === 0
                    },
                    set: function (value) {
                        this.todos.forEach(function (todo) {
                        todo.completed = value
                        })
                    }
                }
            },

            filters: {
                pluralize: function (n) {
                    return n === 1 ? 'item' : 'items'
                }
            },

            methods: {
                addTodo: function () {
                    var value = this.newTodo && this.newTodo.trim()
                    if (!value) {
                        return
                    }
                    this.todos.push({
                        id: todoStorage.uid++,
                        title: value,
                        completed: false
                    })
                    this.newTodo = ''
                },

                removeTodo: function (todo) {
                    this.todos.splice(this.todos.indexOf(todo), 1)
                },

                editTodo: function (todo) {
                    this.beforeEditCache = todo.title
                    this.editedTodo = todo
                },

                doneEdit: function (todo) {
                    if (!this.editedTodo) {
                        return
                    }
                    this.editedTodo = null
                    todo.title = todo.title.trim()
                    if (!todo.title) {
                        this.removeTodo(todo)
                    }
                },

                cancelEdit: function (todo) {
                    this.editedTodo = null
                    todo.title = this.beforeEditCache
                },

                removeCompleted: function () {
                    this.todos = filters.active(this.todos)
                }
            },

            directives: {
                'todo-focus': function (el, binding) {
                    if (binding.value) {
                        el.focus()
                    }
                }
            }
        })

        // handle routing
        function onHashChange () {
            var visibility = window.location.hash.replace(/#\/?/, '')
            if (filters[visibility]) {
                app.visibility = visibility
            } else {
                window.location.hash = ''
                app.visibility = 'all'
            }
        }

        window.addEventListener('hashchange', onHashChange)
        onHashChange()

        // mount
        app.$mount('.todoapp')
    </script>
  </body>
</html>